import { useState } from 'react';
import { addTodo } from '../store/actions/todos';
import { useDispatch } from 'react-redux';

export const TodoHeader = () => {
  // 发action用的
  const dispatch = useDispatch();

  // 实现一个受控组件
  const [txt, setTxt] = useState('敲代码');
  // console.log(txt);

  // 键盘事件处理
  const handleAddTodo = (e) => {
    console.log(e);
    // 添加 todo 之前的判断
    // 1 是不是回车
    if (e.keyCode !== 13) return;
    // 2 是不是空串
    if (!txt.trim()) return;
    // 分发action
    dispatch(addTodo(txt)); // 请求数据

    // 需求变了
    // 1、要把 txt 先交post给服务器，存到数据库，把txt通过res返回给前端 200
    // 2、再把 txt 交给reducer处理，保存到redux中。

    // 第一种实现方式
    // const res = await axios.post('/addtodo', {txt: '敲代码'})
    // 拿到返回数据交给reducer
    // dispatch({ type: types.ADD_TODO, payload: '敲代码' });

    // 第二种实现方式
    // dispatch(addTodo(txt)); // 请求数据
    // const fn = (dispatch, getState) => {
    //   // 获取网络数据 花了2秒时间
    //   const res = { text: text };
    //   // 获取网络数据后修改reducer数据
    //   dispatch({
    //     type: types.ADD_TODO,
    //     payload: res.text,
    //   });
    // dispatch(fn);

    // 清空用户输入
    setTxt('');
  };

  return (
    <header className="header">
      <h1>todos</h1>
      <input
        className="new-todo"
        placeholder="What needs to be done?"
        value={txt} // 控制表单元素
        onChange={(e) => setTxt(e.target.value)} // 控制表单元素的变化
        onKeyDown={handleAddTodo}
        autoFocus
      />
    </header>
  );
};
